<template>
	<eui-page-frame topHeight="496">
		<template #top>
			<view class="content-img" :style="[bgimage]">
				<view class="navigation">
					<eui-nav-bar />
				</view>
			</view>
			<view class="topbg"  :style="[topBg]">
				<view class="top-box">
					<text class="top-box__text-title">新增派工</text>
					<text class="top-box__text-content">倾心服务，每一刻都值得铭记。</text>
				</view>
				<view class="circle-container" :class="[theme]" @click="addClick">
					<eui-icons color="#FFFFFF" size="26" type="plusempty"></eui-icons>
				</view>
			</view>
		</template>

		<eui-page-content>
			<eui-base-card v-for="(item, index) in dataList" :key="index" @click="openDetail(item)"
				:title="item.project">
				<!-- <template #left>
					<view class="e-attachment">
						<image class="e-attachment__image" :src="item.cover" mode="aspectFill" />
					</view>
				</template> -->
				<template #right>
					<eui-tag :text="item.status" plain plainFill :showBorder="false"> </eui-tag>
				</template>
				<eui-detail-show :items="dataItems" v-model="dataList[index]" size="small"></eui-detail-show>
			</eui-base-card>
			<eui-base-card v-if="dataList.length == 0">
				<view class="nodata">
					<image src="@/static/img/no_data.png" mode="aspectFit" class="nodata-image" />
				</view>
			</eui-base-card>
		</eui-page-content>
	</eui-page-frame>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue'
import useService from '@/hooks/useService';
import { initRdsServiceType, initRdsPServiceItem } from '../../../hooks/init.js';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/themeStore';
const themeStore = useThemeStore(); // 主题
const { theme } = storeToRefs(themeStore);
const bgimage =theme._object.theme=='theme-blue'?"background-image: url(../../../static/img/rdsImgs/top_gdfp_blue.jpg);":'background-image: url(../../../static/img/rdsImgs/top_gdfp_orange.jpg);'
const topBg = theme._object.theme=='theme-blue'?'background: url(../../../static/img/rdsImgs/zsqt_augment_bg_blue.png);':'background: url(../../../static/img/rdsImgs/zsqt_augment_bg_orange.png);'
const service = useService({ prefix: "apiApi" });

const whereList = ref([
	{ c_col: "c_bill_type", c_oper: "左相似", c_value: 'DA', c_logic: "而且" },
	{ c_col: "c_work_status", c_oper: "等于", c_value: '0', c_logic: "而且" },
])

const dataItems = [
	{
		label: "申请人",
		prop: "user",
		type: "text",
		element: {
		},
	},
	{
		label: "申请日期",
		prop: "date",
		type: "text",
		element: {
			mode: 'YYYY-MM-DD'
		},
	},
	{
		label: "申请内容",
		prop: "content",
		type: "text",
		element: {
		},
	},
]


const dataList = ref([
	// { project: '', user: '', date: '', content: '', status: '', cover: '../../../static/img/homeImgs/notfound.png' },
]);

onLoad(async () => {
	await initRdsServiceType();
	await initRdsPServiceItem();
})

onShow(() => {
	getApplyData();
})

//获取申请数据
const getApplyData = async () => {
	const req = {
		WhereList: whereList.value
	}
	uni.showLoading({ title: "查询中...", mask: true });
	const res = await service.request('管易通物业模块服务', 'EnjoyQueryList', req);
	uni.hideLoading();
	dataList.value = [];
	if (res && res.ReturnObject) {
		console.log('申请数据', JSON.stringify(res.ReturnObject))
		const objectData = res.ReturnObject;
		if (objectData.length > 0) {
			dataList.value = objectData.map(x => {
				return {
					c_work_id: x.c_work_id,
					c_bill_id: x.c_id,
					project: x.c_property_type_name,
					user: x.c_req_user,
					date: x.c_req_dt,
					content: x.c_question,
					status: x.c_work_status_name,
					cover: '../../../static/img/homeImgs/notfound.png'
				}
			});
		}
	}
}
const openDetail = (e) => {
	console.log("openDetailitem: " + JSON.stringify(e));
	uni.navigateTo({
		url: `./detail?id=${e.c_bill_id}&project=${encodeURIComponent(e.project)}`
	});
}

const addClick = () => {
	uni.navigateTo({
		url: `./add`
	});
}

</script>

<style lang="scss">
.content-img {
	background-image: url(../../../static/img/rdsImgs/top_gdfp_blue.jpg);
	background-size: 100% 400rpx;
	background-repeat: no-repeat;
	width: 100%;
	height: 400rpx;
}

.card {
	border-radius: 16rpx;
	//margin: 0px 10px 10px 10px;
	background-color: #ffffff;
}

.e-attachment {
	align-items: center;
	justify-content: center;
	display: flex;

	&__image {
		width: 230rpx;
		height: 230rpx;
		margin: 12rpx;
		border-radius: 10rpx;
	}
}

.topbg {
	background: url(../../../static/img/rdsImgs/zsqt_augment_bg_blue.png);
	display: flex;
	flex-direction: row;
	border-radius: 20rpx;
	margin: 20rpx 20rpx 0px 20rpx;
	padding: 18rpx 28rpx;
	justify-content: space-between;
	justify-items: center;
	margin-top: -24rpx;
	align-items: center;
}

.top-box {
	display: flex;
	justify-content: flex-start;
	flex-flow: column;

	&__text—title {
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 30rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: center;
		white-space: nowrap;
		line-height: 42rpx;
		margin-right: 220rpx;
	}

	&__text-content {
		overflow-wrap: break-word;
		color: rgba(136, 136, 136, 1);
		font-size: 20rpx;
		font-weight: normal;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
		margin-top: 8rpx;
	}
}

.topimg {
	width: 60rpx;
	height: 60rpx;
}

.circle-container {
	width: 60rpx;
	height: 60rpx;
	position: relative;
	border-radius: 50%;
    background: var(--theme-bgc-color);  //linear-gradient(135deg, #02B7E6 0%, #36A9F3 100%)
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	align-content: space-around;
}

.nodata {
	width: 100%;
	height: 560rpx;

	image {
		width: 100%;
		height: 80%;
		opacity: 0.4;
	}
}
</style>